<template>
  <el-menu
    active-text-color="#ffd04b"
    background-color="#545c64"
    class="el-menu-vertical-demo"
    text-color="#fff"
    router
    :default-active="$route.path"
    :collapse="isCollapse"
  >
    <el-menu-item index="/main/home">
      <el-icon><HomeFilled /></el-icon>
      <span>首页</span>
    </el-menu-item>
    <el-sub-menu index="1">
      <template #title>
        <el-icon><Tools /></el-icon>
        <span>系统操作</span>
      </template>
      <el-menu-item index="/main/menus"
        ><el-icon><Menu /></el-icon><span>菜单管理</span></el-menu-item
      >
      <el-menu-item index="/main/roles"
        ><el-icon><Notification /></el-icon><span>角色管理</span></el-menu-item
      >
      <el-menu-item index="/main/admins"
        ><el-icon><Discount /></el-icon><span>管理员管理</span></el-menu-item
      >
    </el-sub-menu>
    <el-sub-menu index="2">
      <template #title>
        <el-icon><Shop /></el-icon>
        <span>商城管理</span>
      </template>
      <el-menu-item index="/main/cates"
        ><el-icon><Stamp /></el-icon><span>商品分类管理</span></el-menu-item
      >
      <el-menu-item index="/main/specs"
        ><span
          ><el-icon><Histogram /></el-icon>商品规格管理</span
        ></el-menu-item
      >
      <el-menu-item index="/main/goods"
        ><span
          ><el-icon><Goods /></el-icon>商品管理</span
        ></el-menu-item
      >
      <el-menu-item index="/main/member"
        ><span
          ><el-icon><Avatar /></el-icon>会员管理</span
        ></el-menu-item
      >
      <el-menu-item index="/main/banners"
        ><el-icon><PictureFilled /></el-icon
        ><span>轮播图管理</span></el-menu-item
      >
      <el-menu-item index="/main/seckills"
        ><el-icon><Help /></el-icon><span>秒杀活动管理</span></el-menu-item
      >
    </el-sub-menu>
    <el-menu-item index="3" disabled>
      <el-icon><Collection /></el-icon>
      <span slot="title">用户中心</span>
    </el-menu-item>
    <el-menu-item index="4" disabled>
      <el-icon><InfoFilled /></el-icon>
      <span slot="title">关于我们</span>
    </el-menu-item>
  </el-menu>
</template>

<script setup>
import { useRoute } from "vue-router";
const $route = useRoute();
const props = defineProps(["isCollapse"]);
</script>

<style lang="css" scoped>
.el-menu {
  border-right: none;
}

:v-deep .el-sub-menu__title:hover {
  background-color: rgb(124, 124, 124) !important;
  color: rgb(255, 255, 255) !important;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 280px;
  min-height: 400px;
}
.el-menu-item.is-active {
  background-color: #fff !important;
  color: #333 !important;
}
</style>
